<template>
    <view class="globe_back">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <view slot="top">
                <view class="box">
                    <view class="flex tipbox">
                        <u-tabs
                            :list="list1"
                            :current="listindex1"
                            @click="clicklist1"
                            :activeStyle="{ color: '#3377FF', background: '#FFFFFF', padding: '5px 10px' }"
                            :inactiveStyle="{ color: '#606266', padding: '5px 10px' }"
                        ></u-tabs>
                        <!-- <u-subsection :list="list1" :current="listindex1" @change="clicklist1"></u-subsection> -->
                        <!-- <view :class="tipIndex == item.id ? 'tipActive' : 'tip'" @click="isRouter(item.path)" v-for="item in tiptext">{{ item.name }}</view> -->
                    </view>
                    <view class="flex">
                        <u-tabs
                            :list="thislist2"
                            :current="listindex2"
                            @click="clicklist2"
                            :activeStyle="{ color: '#3377FF', fontWeight: 'bold' }"
                            :inactiveStyle="{ color: '#606266' }"
                        ></u-tabs>
                        <!-- <view :class="tabIndex == item.id ? 'tabActive' : 'tab'" @click="navtab(item.id)" v-for="item in tab">{{ item.name }}</view> -->
                    </view>
                </view>
            </view>
            <view class="box" style="padding-bottom: 32rpx">
                <!-- 列表 -->
                <view>
                    <!-- // 商城 -->
                    <view class="" v-if="listindex1 == 0">
                        <view v-if="listindex2 == 0">
                            <view v-for="item in 5">
                                <lz-order-item :item="item" type="goods"></lz-order-item>
                            </view>
                        </view>
                    </view>

                    <!-- // 租车 -->
                    <view class="" v-if="listindex1 == 1">
                        <view v-if="listindex2 == 0">
                            <view class="list" v-for="item in 5">
                                <lz-order-item :item="item" type="cars"></lz-order-item>
                            </view>
                        </view>
                    </view>

                    <!-- // 电池 -->
                    <view class="" v-if="listindex1 == 2">
                        <!-- 全部 -->
                        <view v-if="listindex2 == 0">
                            <view class="list" v-for="item in 5">
                                <lz-order-item :item="item" type="battery"></lz-order-item>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
        <!-- 底部tab -->
        <view style="height: 30px"></view>
        <view class="flex justify_content_center bottonTab">
            <view @click="click1(0)" class="tabitem">
                <image v-if="tabactive == 0" class="tabIcon" src="@/static/imgs/tabBar/jdy_dd1.png" mode=""></image>
                <image v-else class="tabIcon" src="@/static/imgs/tabBar/jdy_dd.png" mode=""></image>
                <text :class="tabactive == 0 ? 'active' : ''">订单</text>
            </view>
            <view @click="click1(1)" class="tabitem">
                <image v-if="tabactive == 1" class="tabIcon" src="@/static/imgs/tabBar/skills-y.png" mode=""></image>
                <image v-else class="tabIcon" src="@/static/imgs/tabBar/skills-w.png" mode=""></image>
                <text :class="tabactive == 1 ? 'active' : ''">消息</text>
            </view>
            <view @click="click1(2)" class="tabitem">
                <image v-if="tabactive == 2" class="tabIcon" src="@/static/imgs/tabBar/jdy_my1.png" mode=""></image>
                <image v-else class="tabIcon" src="@/static/imgs/tabBar/jdy_my.png" mode=""></image>
                <text :class="tabactive == 2 ? 'active' : ''">我的</text>
            </view>
        </view>
    </view>
</template>

<script>
import lzOrderItem from '@/components/sjd-order-item/sjd-order-item';
export default {
    components: {
        lzOrderItem
    },
    data() {
        return {
            sendShow: false,
            type: 0, //0待发货，1待收货，2已完成，3售后中
            ProductType: 1, //0普通商品，1电池
            tipIndex: 3,
            tabIndex: 1,
            value1: 0,

            tab: [
                {
                    name: '全部',
                    id: 1
                },
                {
                    name: '待支付',
                    id: 2
                },
                {
                    name: '待发货',
                    id: 3
                },
                {
                    name: '待收货',
                    id: 4
                },
                {
                    name: '已完成',
                    id: 5
                },
                {
                    name: '售后',
                    id: 6
                }
            ],
            list: [],

            listindex1: 0,
            list1: [
                { name: '商城', id: 1 },
                { name: '租车', id: 2 },
                { name: '电池', id: 3 }
            ],

            listindex2: 0,
            list2: [
                [
                    { name: '新订单', id: 1 },
                    { name: '进行中', id: 2 },
                    { name: '已完成', id: 3 }
                ],
                [
                    { name: '新订单', id: 1 },
                    { name: '进行中', id: 2 },
                    { name: '已完成', id: 3 }
                ],
                [
                    { name: '新订单', id: 1 },
                    { name: '待取货', id: 2 },
                    { name: '配送中', id: 3 },
                    { name: '服务中', id: 4 },
                    { name: '已完成', id: 5 }
                ],
                [
                    { name: '新订单', id: 1 },
                    { name: '进行中', id: 2 },
                    { name: '已完成', id: 3 }
                ]
            ],
            thislist2: [
                { name: '全部', id: 1 },
                { name: '待发货', id: 2 },
                { name: '待收获', id: 3 },
                { name: '已完成', id: 4 },
                { name: '售后', id: 5 }
            ]
        };
    },
    onLoad(e) {
        console.log(e.tipIndex);
        this.tipIndex = e.tipIndex;
    },
    methods: {
        clicklist1(item) {
            console.log('item', item);
            this.listindex1 = item.index;
            this.thislist2 = this.list2[this.listindex1];
        },
        clicklist2(item) {
            console.log('item', item);
            // this.thislist2 = list2[this.listindex1];
        },
        buy() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/MallToBePaid'
            });
        },
        CancelOrder() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/CancelOrder'
            });
        },
        orderInfo() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/BatteryToBePaid'
            });
        },
        isRouter(url) {
            this.$api.auth(url);
        },
        click1(e) {
            console.log('click1', e);
            if (e == 0) {
                uni.navigateTo({
                    url: '/pages/business/order'
                });
            }
            if (e == 2) {
                uni.navigateTo({
                    url: '/pages/business/business'
                });
            }
        },
        tip(e) {
            this.tipIndex = e;
        },
        navtab(e) {
            this.tabIndex = e;
        },
        sendClose() {
            this.sendShow = false;
        },

        // pageNo 页数 pageSize 单页显示数量
        queryList(pageNo, pageSize) {
            //模拟数据
            let list = [
                {
                    allMoney: '2199',
                    name: '王先生',
                    phone: '159****7855',
                    address: '贵州省贵阳市南明区花果园购物中心1号',
                    time: '2022-02-12 2022-02-12',
                    number: '2',
                    type: '待发货',
                    oddNumbers: '202204130925640001',
                    commodity: [
                        {
                            img: '@/static/imgs/img.png',
                            title: '哈啰电动车新国标电动自行车锂电成人男女学生智能A80电瓶车',
                            type: '新款',
                            num: 1,
                            inventory: '3323',
                            money: '1549.00'
                        }
                    ]
                }
            ];
            this.$refs.paging.complete(list);
            // 分页停止
            if (pageNo >= 5) {
                this.$refs.paging.complete(false);
            }
        },
        // 重新加载分页
        reload() {
            this.$refs.paging.reload();
        }
    }
};
</script>

<style scoped lang="scss">
/deep/.u-tabs__wrapper__nav__line {
    display: none;
}
.nameTitle {
    text-align: center;
}
.storeImg {
    width: 48rpx;
    height: 48rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin-right: 8rpx;
}
.name {
    width: 574rpx;
    height: 92rpx;
    line-height: 92rpx;
    padding: 0 24rpx;
    margin-top: 10px;
}

.nameBtn {
    width: 298rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    display: inline-block;
    margin-top: 64rpx;
}
.userInfo {
    background: #f7f7f7;
    border-radius: 16rpx;
    font-size: 28rpx;
    padding: 8rpx 24rpx;
    margin-top: 26rpx;
    .info {
        padding: 8rpx 0;
    }
}
.listTitle {
    width: 400rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.box {
    padding: 0 32rpx 32rpx;
}
.bottonTab {
    height: 100rpx;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    padding-bottom: 20rpx;
    padding-top: 20rpx;
}
.tabitem {
    width: 50%;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    font-size: 28rpx;
    color: #ccced1;
}
.tabIcon {
    width: 40rpx;
    height: 40rpx;
    display: block;
    margin: 0 auto;
}
.log-text {
    width: 4rpx;
    height: 32rpx;
    background-color: #3377ff;
}
.imgIcon {
    width: 40rpx;
    height: 40rpx;
}
</style>
